import { getResourceListByCond } from '@/api/resource';
import { PaginationLayout, ResourceFileType, formatEnumForSelect } from '@/views/enum/common';
import { useRequest } from '@jl/common/composable';
import {
  IColumnConfig,
  IFormConfig,
  IFormData,
  IFormItemConfig,
  IJLDatagridInstance,
  IJlFormInstance,
  IPageConfig,
  ITableConfig,
} from '@jl/element-plus';
import { dayjs } from 'element-plus';

export function list() {
  const formRef = ref<IJlFormInstance>();

  const formConfig: IFormConfig = { gutter: 10, labelWidth: 80 };
  const formData = ref<IFormData>({
    blurName: '',
    time: [],
    dataType: undefined,
  });

  const formItemConfig = computed<IFormItemConfig>(() => [
    {
      type: 'input',
      key: 'blurName',
      label: '资源名称',
      span: 5,
      clearable: true,
      placeholder: '请输入',
      optionsWithAll: true,
    },
    {
      type: 'date',
      key: 'time',
      dateType: 'daterange',
      label: '日期范围',
      span: 5,
      clearable: true,
      placeholder: '请选择',
      optionsWithAll: true,
      rangeSeparator: '-',
    },
    {
      type: 'select',
      key: 'dataType',
      label: '数据格式',
      span: 5,
      clearable: true,
      placeholder: '请选择',
      options: formatEnumForSelect(ResourceFileType),
      optionsWithAll: true,
    },
    {
      type: 'slot',
      slotName: 'searchSlot',
      key: 'search',
      label: '',
      span: 5,
      labelWidth: 10,
    },
  ]);

  const { run, data } = useRequest<any, any>(getResourceListByCond, {
    list: [],
    count: 0,
  });

  const pageConfig = ref<IPageConfig>({
    small: false,
    visible: true,
    layout: PaginationLayout,
    total: 0,
    pageSize: 10,
    currentPage: 1,
    background: true,
  });

  const tableData = computed(() => {
    return data.value.list.map((v: any, i: number) => ({
      ...v,
      serial: (pageConfig.value.currentPage - 1) * pageConfig.value.pageSize + i + 1,
    }));
  });

  const tableRef = ref<IJLDatagridInstance>();

  const tableConfig = ref<ITableConfig>({
    index: false,
    selection: false,
  });

  const tableColumn = ref<IColumnConfig[]>([
    { label: '序号', prop: 'serial', width: '80px' },
    { label: '资源封面', prop: 'resCover', slotName: 'resCoverSlot' },
    { label: '资源名称', prop: 'fileResName' },
    {
      label: '数据格式',
      prop: 'fileType',
    },
    {
      label: '数据大小',
      prop: 'fileSize',
      slotName: 'fileSizeSlot',
    },
    { label: '处理状态', prop: 'handleState', slotName: 'handleStateSlot' },
    { label: '访问次数', prop: 'usageCount' },
    { label: '添加人', prop: 'userName' },
    { label: '添加时间', prop: 'uploadTime', width: '170px', slotName: 'uploadTimeSlot' },
    { label: '操作', prop: 'operation', width: '160px', fixed: 'right', slotName: 'slotOperation' },
  ]);

  const search = async (flag = false) => {
    if (flag) {
      pageConfig.value.currentPage = 1;
    }
    const searchParam = {
      params: {
        index: pageConfig.value.currentPage,
        pageSize: pageConfig.value.pageSize,
        blurName: formData.value.blurName,
        beginTime: '',
        endTime: '',
        dataType: formData.value.dataType || 'all',
      },
    };
    if (formData.value.time && formData.value.time.length) {
      searchParam.params.beginTime =
        dayjs(formData.value.time[0]).format('YYYY-MM-DD') + ' 00:00:00';
      searchParam.params.endTime = dayjs(formData.value.time[1]).format('YYYY-MM-DD') + ' 23:59:59';
    }
    await run(searchParam);
    pageConfig.value.total = data.value.count;
  };
  function pageSizeChange(size: number) {
    pageConfig.value.pageSize = size;
    search();
  }
  function pageCurrentChange(page: number) {
    pageConfig.value.currentPage = page;
    search();
  }
  return {
    formRef,
    formConfig,
    formData,
    formItemConfig,
    tableRef,
    pageConfig,
    tableConfig,
    tableColumn,
    tableData,
    search,
    pageCurrentChange,
    pageSizeChange,
  };
}
